<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<box :message="msg"></box>
		<hr />
		<input type="text" v-model="str" placeholder="请输入传递给子组件的信息" />
		<p>要传递给子组件的信息是：{{str}}</p>
		
		<hr />
		<com :info="str"></com>
		</div>
		
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				msg:'我是你爸爸',
				str:''
			},
			components:{
				box:{
					template:"<div><h3>我是子组件接受来自父组件的信息---{{message}}</h3></div> ",
					data(){
						return {
							
						}
					},
					props:{
						message:{
							type:String,
							required:true,
							default:'default'
						}
					}
				},
				com:{
					template:"<div><p>我是子组件，等待来自父组件的信息-----<strong>{{info}}</strong> </p> </div>",
					props:['info']
				}
				
			}
			
			
		})
		
		
		
	</script>
	  <!-- type:数据类型，
	    required:true/false,是否必须传递
	default:'default' 默认值
	 String、 Number、Boolean、 Array、 Object、Date、Function、 Symbol -->
    <!-- 父组件向子组件传递数据：
	1.在父组件中的子组件标签上绑定属性，属性的值是我们要传递给子组件的值
	2.在子组件中，用props定义一下 -->
	</body>
</html>
